<template>
  <div>
    <nav-bar title="我的消息"/>
    <div class="content_scroll">
      <ul class="message_box">
        <li v-for="(item, index) in list" :key="index" @click="itemClick(index)">
          <img class="icon" :src="item.icon" alt="">
          <div class="content_center">
            <h4>{{item.title}}</h4>
            <span>{{item.text}}</span>
          </div>
          <div class="right_icon">
            <span>查看</span>
            <img src="../../../assets/img/server/ic_right.png" alt="">
          </div>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
import NavBar from '../../../components/common/navbar/NavBar.vue'
export default {
  components: {
    NavBar
  },
  data() {
    return {
      list: [
        {icon: require('../../../assets/img/server/ic_kefu.png'),title: '客服消息', text: '客服推送消息(返利码/反馈回复等)'},
        {icon: require('../../../assets/img/server/ic_message.png'),title: '互动消息', text: '和小伙伴们互动起来！'},
        {icon: require('../../../assets/img/server/ic_news.png'),title: '系统消息', text: '通知类信息查看！'},
        {icon: require('../../../assets/img/server/ic_games.png'),title: '游戏动态', text: '收藏的游戏动态，可在此处查看~'},
      ]
    }
  },
  methods: {
    itemClick(index) {
      switch(index) {
        case 0:

          break;
        case 1:

          break;
        case 2:

          break;
        case 3:

      }
    }
  },
}
</script>

<style lang="less" scoped>
.message_box {
  width: 9.146667rem;
  padding: .266667rem .426667rem 0;
  font-size: .32rem;
  li {
    box-sizing: border-box;
    width: 9.146667rem;
    height: 2.133333rem;
    background: #FFFFFF;
    border-radius: .266667rem;
    margin-bottom: .133333rem;
    display: flex;
    align-items: center;
    padding: .4rem .266667rem;
    .icon {
      width: 1.333333rem;
      height: 1.333333rem;
      margin-right: .2rem;
    }
    .content_center {
      flex: 1;
      height: 1.333333rem;
      h4 {
        margin: 0;
        padding: .213333rem 0;
        font-size: .4rem;
        font-weight: bold;
        color: #333333;
      }
      span {
        font-size: .32rem;
        font-weight: 500;
        color: #999999;
      }
    }
    .right_icon {
      color: #cccccc;
      display: flex;
      align-items: center;
      img {
        margin-left: .133333rem;
        width: .2rem;
        height: .36rem;
      }
    }
  }
}
</style>